<template>
  <div class="user-management">
    <div class="search-container">
      <div class="search-input">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="paramsForm.keywords"
          style="margin-left: 40px; width: 500px"
        ></el-input>
      </div>
      <div class="button">
        <el-button
          type="primary"
          size="small"
          @click="getScoreList()"
          class="search-button"
          style="height: 30px"
        >
          搜索按钮
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="resetDialog()"
          class="search-button"
          style="height: 30px"
        >
          重置按钮
        </el-button>
      </div>
    </div>

    <div class="table">
      <el-table :data="scores" style="width: 100%; border-radius: 10px">
        <el-table-column prop="scoreId" label="成绩ID"></el-table-column>
        <el-table-column prop="enrollmentId" label="选课ID"></el-table-column>
        <el-table-column prop="studentId" label="学生ID"></el-table-column>
        <el-table-column prop="grade" label="总成绩"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="usualGrade" label="平时成绩"></el-table-column>
        <el-table-column prop="examGrade" label="考试成绩"></el-table-column>
      </el-table>
    </div>

    <div style="width: 40px; margin-top: 20px; margin-left: 60px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paramsForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="paramsForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { showScoresByStudent } from '@/api/score'
import userUserStore from '@/store/modules/user'

const userStore = userUserStore()

export default {
  mounted() {
    this.getScoreList()
  },
  data() {
    return {
      total: 0,
      paramsForm: {
        pageSize: 10,
        pageNum: 1,
        keywords: '',
        id: userStore.userInfo.username,
        // id:2100300101,
      },
      scores: [],
    }
  },
  methods: {
    resetDialog() {
      ;(this.paramsForm.keywords = ''), this.getScoreList()
    },
    getScoreList() {
      const queryParams = `pageNum=${this.paramsForm.pageNum}&pageSize=${this.paramsForm.pageSize}&id=${this.paramsForm.id}&keywords=${this.paramsForm.keywords}`
      showScoresByStudent(queryParams)
        .then((response) => {
          const { data } = response
          this.scores = data.list
          this.total = data.total
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },
    handleSizeChange(val: number) {
      this.paramsForm.pageSize = val
      this.getScoreList()
    },
    handleCurrentChange(val: number) {
      this.paramsForm.pageNum = val
      this.getScoreList()
    },
  },
}
</script>

<style scoped lang="scss">
.search-container {
  margin-top: 20px;
  margin-bottom: 30px;
  margin-left: 200px;
  display: flex;
}

.button {
  margin-left: 20px;
}

.table {
  margin-left: 50px;
  width: 90%;
}
</style>
